<template>
  <div>
    <div class="topNav">
      <div class="float">
        <div class="item code" @click="service()">
          <img src="~/static/kf.svg" alt="" />
          <span>客服</span>
        </div>
      </div>
      <div class="logo">
        <img
          src="~/static/index/logo-text.svg"
          alt=""
          class="logo-img"
        />
      </div>
      <div class="nav">
        <div class="login" v-show="isLogin == false" @click="loginShow = true">
          <p>未登陆</p>
          <img src="~/static/index/user.svg" alt="" class="user" />
        </div>
        <el-dropdown @command="handleCommand" trigger="click" v-show="isLogin == true">
          <span class="el-dropdown-link">
            <div class="login islogin">
              <p style="color: rgba(255, 117, 18, 1)">
                {{ userInfo.username }}
                <i class="el-icon-arrow-down"></i>
              </p>
              <img
                :src="userInfo.avatarUrl"
                alt=""
                class="user"
                style="
                  border: 1px solid #FF8D1A; border-radius: 33px;
                "
              />
            </div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in webList"
              :key="index"
              :command="item.url"
              >{{ item.name }}</el-dropdown-item
            >
            <el-dropdown-item divided command="signout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="handleCommand1" trigger="click">
          <span class="el-dropdown-link">
            <div class="menu">
              <img src="~/static/h5/menu.svg" alt="" class="icon" />
            </div>
          </span>
          <el-dropdown-menu slot="dropdown" style="margin-left: 7px">
            <el-dropdown-item command="#index">首页</el-dropdown-item>
            <el-dropdown-item command="#product">产品中心</el-dropdown-item>
            <el-dropdown-item command="#case">案例中心</el-dropdown-item>
            <el-dropdown-item command="#partner">合作伙伴</el-dropdown-item>
            <el-dropdown-item command="#phone">联系我们</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="banner" id="index">
      <div class="banner-image">
        <el-carousel
          trigger="click"
          height="226px"
          indicator-position="none"
          :interval="8000"
        >
          <el-carousel-item v-for="item in bannerList" :key="item">
            <img :src="item" alt="" style="height: 100%; width: 100%" />
            <div class="hover">
              <div class="text1">工业物联网平台</div>
              <div class="text2">智能集成管理一体化</div>
              <div class="case-box">
                <div class="case">
                  <img src="~/static/h5/data.svg" alt="" class="icon" />
                  <div class="text">数据存储分析</div>
                </div>
                <div class="case">
                  <img
                    src="~/static/h5/service.svg"
                    alt=""
                    class="icon"
                  />
                  <div class="text">运维服务</div>
                </div>
                <div class="case">
                  <img
                    src="~/static/h5/energy.svg"
                    alt=""
                    class="icon"
                  />
                  <div class="text">节能核算</div>
                </div>
                <div class="case">
                  <img
                    src="~/static/h5/warning.svg"
                    alt=""
                    class="icon"
                  />
                  <div class="text">故障告警</div>
                </div>
                <div class="case">
                  <img src="~/static/h5/watch.svg" alt="" class="icon" />
                  <div class="text">实时远程监测</div>
                </div>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <img
              src="~/static/h5/image2.png"
              alt=""
              style="height: 100%; width: 100%"
              @click="gotoStore"
            />
            <div class="hover">
              <div class="text1" @click="gotoStore">特配商城</div>
              <div class="text2" @click="gotoStore">新型数字化采购模式</div>
              <div class="case-box">
                <div class="case">
                  <img src="~/static/h5/data.svg" alt="" class="icon" />
                  <div class="text">数据存储分析</div>
                </div>
                <div class="case">
                  <img
                    src="~/static/h5/service.svg"
                    alt=""
                    class="icon"
                  />
                  <div class="text">运维服务</div>
                </div>
                <div class="case">
                  <img
                    src="~/static/h5/energy.svg"
                    alt=""
                    class="icon"
                  />
                  <div class="text">节能核算</div>
                </div>
                <div class="case">
                  <img
                    src="~/static/h5/warning.svg"
                    alt=""
                    class="icon"
                  />
                  <div class="text">故障告警</div>
                </div>
                <div class="case">
                  <img src="~/static/h5/watch.svg" alt="" class="icon" />
                  <div class="text">实施远程监测</div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="product" id="product">
      <div
        style="font-size: 32px;font-weight: 700; letter-spacing: 0px; line-height: 47px; color: rgba(13, 21, 46, 1);"
      >
        产品中心
      </div>
      <div
        style="font-size: 16px;font-weight: 500; letter-spacing: 0px; line-height: 22px;color: rgba(255, 117, 18, 1);"
      >
        PRODUCT CENTER
      </div>
      <div class="text">
        炉管家专注于为各类锅炉生产与使用企业提供具有针对性的工业物联网服务对接与产品供应，高兼容性的适配能力完美的支撑应用扩展，为不同类型的企业客户量身定制智能化产品与服务解决方案。
      </div>
      <div class="product-box">
        <div class="product-item" style="background: rgba(255, 255, 255, 1)">
          <div class="text-box">
            <div class="text1">智慧锅炉</div>
            <div class="text2">数据集成平台</div>
          </div>
          <img src="~/static/index/product1.svg" alt="" />
        </div>
        <div
          class="product-item"
          style="background: rgba(240, 240, 240, 1)"
          @click="gotoStore"
        >
          <div class="text-box">
            <div class="text1">锅炉配件</div>
            <div class="text2">特配商城</div>
          </div>
          <img src="~/static/index/product6.svg" alt="" />
        </div>
        <div class="product-item" style="background: rgba(240, 240, 240, 1)">
          <img src="~/static/index/product5.svg" alt="" />
          <div class="text-box">
            <div class="text1">数字锅炉</div>
            <div class="text2">服务管理平台</div>
          </div>
        </div>
        <div class="product-item" style="background: rgba(255, 255, 255, 1)">
          <img src="~/static/index/product2.svg" alt="" />
          <div class="text-box">
            <div class="text1">智慧锅炉</div>
            <div class="text2">APP应用</div>
          </div>
        </div>
        <div class="product-item" style="background: rgba(255, 255, 255, 1)">
          <div class="text-box">
            <div class="text1">智慧锅炉</div>
            <div class="text2">数据分析平台</div>
          </div>
          <img src="~/static/index/product3.svg" alt="" />
        </div>
        <div class="product-item" style="background: rgba(240, 240, 240, 1)">
          <div class="text-box">
            <div class="text1">智慧锅炉</div>
            <div class="text2">专家司炉引擎</div>
          </div>
          <img src="~/static/index/product4.svg" alt="" />
        </div>
        <div class="product-item" style="background: rgba(240, 240, 240, 1)">
          <img src="~/static/index/product7.png" alt="" />
          <div class="text-box">
            <div class="text1">数字锅炉</div>
            <div class="text2">监管治理平台</div>
          </div>
        </div>
        <div class="product-item" style="background: rgba(255, 255, 255, 1)">
          <img src="~/static/index/product8.svg" alt="" />
          <div class="text-box">
            <div class="text1">数字锅炉</div>
            <div class="text2">物联通讯模块</div>
          </div>
        </div>
      </div>
    </div>
    <div class="example" id="case">
      <div
        style="font-size: 32px; font-weight: 700; letter-spacing: 0px; line-height: 47px; color: rgba(13, 21, 46, 1); padding: 0 16px;"
      >
        案例中心
      </div>
      <div
        style="font-size: 16px; font-weight: 500;  letter-spacing: 0px; line-height: 22px;  color: rgba(255, 117, 18, 1); padding: 0 16px;"
      >
        CASE CENTER
      </div>
      <div class="text">
        宁波厚德能源科技有限公司作为炉管家售后服务体系建立者，长期深耕于锅炉物联网领域，技术实力雄厚，实战经验丰富。
      </div>
      <div class="example-box">
        <div class="example-item" @click="change(1)">
          <div class="icon1" v-show="checked == 1">
            <img src="~/static/index/example11.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 1">
            <img src="~/static/index/example1.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 1">智慧锅炉房</div>
          <div class="example-title2" v-show="checked != 1">智慧锅炉房</div>
          <div class="border" v-show="checked == 1"></div>
        </div>
        <div class="example-item" @click="change(2)">
          <div class="icon1" v-show="checked == 2">
            <img src="~/static/index/example41.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 2">
            <img src="~/static/index/example4.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 2">运维平台</div>
          <div class="example-title2" v-show="checked != 2">运维平台</div>
          <div class="border" v-show="checked == 2"></div>
        </div>
        <div class="example-item" @click="change(3)">
          <div class="icon1" v-show="checked == 3">
            <img src="~/static/index/example51.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 3">
            <img src="~/static/index/example5.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 3">特配商城</div>
          <div class="example-title2" v-show="checked != 3">特配商城</div>
          <div class="border" v-show="checked == 3"></div>
        </div>
        <div class="example-item" @click="change(4)">
          <div class="icon1" v-show="checked == 4">
            <img src="~/static/index/example31.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 4">
            <img src="~/static/index/example3.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 4">
            物联网平台
          </div>
          <div class="example-title2" v-show="checked != 4">
            物联网平台
          </div>
          <div class="border" v-show="checked == 4"></div>
        </div>
        <div class="example-item" @click="change(5)">
          <div class="icon1" v-show="checked == 5">
            <img src="~/static/index/example61.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 5">
            <img src="~/static/index/example6.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 5">
            特设助手
          </div>
          <div class="example-title2" v-show="checked != 5">
            特设助手
          </div>
          <div class="border" v-show="checked == 5"></div>
        </div>
        <div class="example-item" @click="change(6)">
          <div class="icon1" v-show="checked == 6">
            <img src="~/static/index/example21.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 6">
            <img src="~/static/index/example2.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 6">
            云耐压试验
          </div>
          <div class="example-title2" v-show="checked != 6">
            云耐压试验
          </div>
          <div class="border" v-show="checked == 6"></div>
        </div>
      </div>
      <div class="example-image">
        <swiper
          :options="swiperOption1"
          @slide-change-transition-end="handleClickSlide"
          ref="swiper"
          class="_swiper"
        >
          <swiper-slide>
            <swiper :options="swiperOption">
              <swiper-slide v-for="(img, index) in caseList1" :key="index">
                <div class="swiper-zoom-container">
                  <img :src="img" alt="" style="width: 100%; height: 150px" />
                </div>
              </swiper-slide>
            </swiper>
          </swiper-slide>
          <swiper-slide>
            <swiper :options="swiperOption">
              <swiper-slide v-for="(img, index) in caseList2" :key="index">
                <div class="swiper-zoom-container">
                  <img :src="img" alt="" style="width: 100%; height: 150px" />
                </div>
              </swiper-slide>
            </swiper>
          </swiper-slide>
          <swiper-slide>
            <swiper :options="swiperOption">
              <swiper-slide v-for="(img, index) in caseList3" :key="index">
                <div class="swiper-zoom-container">
                  <img :src="img" alt="" style="width: 100%; height: 150px" />
                </div>
              </swiper-slide>
            </swiper>
          </swiper-slide>
          <swiper-slide>
            <swiper :options="swiperOption">
              <swiper-slide v-for="(img, index) in caseList4" :key="index">
                <div class="swiper-zoom-container">
                  <img :src="img" alt="" style="width: 100%; height: 150px" />
                </div>
              </swiper-slide>
            </swiper>
          </swiper-slide>
          <swiper-slide>
            <swiper :options="swiperOption">
              <swiper-slide v-for="(img, index) in caseList5" :key="index">
                <div class="swiper-zoom-container">
                  <img :src="img" alt="" style="width: 100%; height: 150px" />
                </div>
              </swiper-slide>
            </swiper>
          </swiper-slide>
          <swiper-slide>
            <swiper :options="swiperOption">
              <swiper-slide v-for="(img, index) in caseList6" :key="index">
                <div class="swiper-zoom-container">
                  <img :src="img" alt="" style="width: 100%; height: 150px" />
                </div>
              </swiper-slide>
            </swiper>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="about">
      <div
        style="font-size: 32px; font-weight: 700; letter-spacing: 0px; line-height: 47px; color: rgb(13, 21, 46);"
      >
        关于我们
      </div>
      <div
        style="font-size: 16px; font-weight: 500; letter-spacing: 0px; line-height: 22px; color: rgba(255, 117, 18, 1);"
      >
        ABOUT US
      </div>
      <div class="text">
        炉管家专注于为各类锅炉生产与使用企业提供具有针对性的工业物联网服务对接与产品供应，高兼容性的适配能力完美的支撑应用扩展，为不同类型的企业客户量身定制智能化产品与服务解决方案。
      </div>
      <div class="data-box">
        <div class="data-item">
          <div style="display: flex">
            <p
              style="font-size: 18px; font-weight: 400; line-height: 24px; color: rgba(255, 117, 18, 1); margin: 0; margin-right: 2px;"
            >
              2015
            </p>
            <p
              style="font-size: 12px; font-weight: 400; letter-spacing: 0px; line-height: 21px; color: rgba(13, 21, 46, 0.65); margin: 0; margin-top: 4px;"
            >
              年
            </p>
          </div>

          <div class="data-text">公司成立</div>
        </div>
        <div class="line"></div>
        <div class="data-item">
          <div style="display: flex">
            <p
              style="font-size: 18px; font-weight: 400; line-height: 24px; color: rgba(255, 117, 18, 1); margin: 0; margin-right: 2px;"
            >
              1000
            </p>
            <p
              style="font-size: 12px; font-weight: 400; letter-spacing: 0px; line-height: 21px; color: rgba(13, 21, 46, 0.65); margin: 0; margin-top: 4px;"
            >
              万
            </p>
          </div>
          <div class="data-text">注册资本</div>
        </div>
        <div class="line"></div>
        <div class="data-item">
          <div style="display: flex">
            <p
              style="font-size: 18px; font-weight: 400; line-height: 24px; color: rgba(255, 117, 18, 1);  margin: 0; margin-right: 2px;"
            >
              30
            </p>
            <p
              style="font-size: 12px; font-weight: 400; letter-spacing: 0px; line-height: 21px; color: rgba(13, 21, 46, 0.65); margin: 0; margin-top: 4px;"
            >
              +
            </p>
          </div>
          <div class="data-text">知识产权</div>
        </div>
      </div>
      <div>
        <img
          src="~/static/h5/about.png"
          alt=""
          style="width: 100%; height: 143px; margin-top: 16px"
        />
      </div>
    </div>
    <div class="about" style="padding-top:0">
      <div
        style="font-size: 32px; font-weight: 700; letter-spacing: 0px; line-height: 47px; color: rgb(13, 21, 46);"
      >
        新闻资讯
      </div>
      <div
        style="font-size: 16px; font-weight: 500; letter-spacing: 0px; line-height: 22px; color: rgba(255, 117, 18, 1);"
      >
        NEWS INFORMATION
      </div>
      <div class="newsList">
        <div class="news" v-for="(item, index) in newsList" :key="index">
          <div class="left">
            <div class="top" style="cursor: pointer" @click="gotoDetail(item)">
              <div
                style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-right: 10px;"
              >
                {{ item.name }}
              </div>
              <img
                src="~/static/index/theTop.svg"
                style="height: 16px; margin-right: 10px"
                v-show="item.top == 1"
              />
            </div>
            <div class="bottom" style="display: flex; align-items: center">
              {{ item.newsCreatedAt }}
            </div>
          </div>
          <div class="right">
            <nuxt-link :to="{name:'mobile-news-id',params:{id: item.id}}" >查看</nuxt-link>
          </div>
          <!-- <div class="right" @click="gotoDetail(item)">查看</div> -->
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div class="partner" id="partner">
      <div class="partner-box">
        <div class="title">合作伙伴</div>
        <div class="partners">
          <div class="parter-item">
            <div class="text">战略合作院校</div>
            <img src="~/static/h5/zhejiang.png" alt="" />
            <img src="~/static/h5/nottingham.png" alt="" />
          </div>
          <div class="parter-item">
            <div class="text">战略合作机构</div>
            <!-- <img src="~/static/h5/nohas.png" alt="" @click="gotoNohas" /> -->
            <a href="https://www.nuochtec.com/mobile" target="_blank"><img src="~/static/h5/nohas.png" alt=""/></a>
            <img src="~/static/h5/nbtj.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="用户登录"
      :visible="loginShow"
      width="300px"
      :before-close="handleClose"
    >
      <el-input v-model="account" placeholder="账号"></el-input>
      <el-input
        v-model="password"
        placeholder="密码"
        show-password
        style="margin-top: 12px"
      ></el-input>
      <div style="display: flex; justify-content: center">
        <div
          style="
            width: 250px; height: 30px; line-height: 30px;
            margin: 0 auto;
            margin-top: 20px;
            background: rgba(255, 117, 18, 1);
            font-size: 14px;
            color: rgba(255, 255, 255, 1);
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
          "
          @click="handleChange"
        >
          登录
        </div>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import Cookie from "js-cookie";
export default {
  layout:'mobile',
  name: "index",
  head() {
    return {
      title: " 炉管家 - 锅炉的事，就找炉管家",
    };
  },
  watch: {
    a: {
      handler(newVal) {},
      // deep: true
    },
  },
  async asyncData({ $indexApi }) {
    const res = await $indexApi.getNews({
      current: 1,
      size: 4,
      descs: "top,news_created_at",
    });
    if (res.code == "0") {
      return {
        //评论列表
        newsList: res.data.records,
        total: res.data.total,
      };
    }
  },
  data() {
    const that = this;
    return {
      isLogin: false,
      checked: 1,
      caseList: [require("~/static/case/case1-1.png")],
      caseList1: [require("~/static/case/case1-1.png")],
      caseList6: [
        require("~/static/case/case2-1.png"),
        require("~/static/case/case2-2.png"),
        require("~/static/case/case2-3.png"),
        require("~/static/case/case2-4.png"),
      ],
      caseList4: [require("~/static/case/case3-1.png")],
      caseList2: [
        require("~/static/case/case4-1.png"),
        require("~/static/case/case4-2.png"),
        require("~/static/case/case4-3.png"),
        require("~/static/case/case4-4.png"),
      ],
      caseList3: [
        require("~/static/case/case5-1.png"),
        require("~/static/case/case5-2.png"),
        require("~/static/case/case5-3.png"),
      ],
      caseList5: [require("~/static/case/case6-1.png")],
      bannerList: [require("~/static/h5/image1.png")],
      loginShow: false,
      account: "",
      password: "",
      data: {},
      userInfo: {},
      webList: [],
      click: true,
      times: null,
      swiperOption: {
        // width: window.innerWidth,
        zoom: true,
        initialSlide: 0,
      },
      // activeIndex:0,
      // a: localStorage.getItem("checked"),
      swiperOption1: {
        // width: window.innerWidth,
        zoom: true,
        initialSlide: 0,
        on: {
          slideChangeTransitionEnd: function () {
            that.checked = this.activeIndex + 1;
          },
        },
      },
      newsList: [],
      current: 1,
      total: 0,
    };
  },
  created() {
    if (Cookie.get("token")) {
      this.isLogin = true;
      this.getWebList();
      this.getUserInfo();
    }
    // this.getNews();
  },
  mounted() {},
  methods: {
    gotoStore() {
      window.open("https://tepeimall.com/h5/#/", "_blank");
    },
    change(id) {
      this.checked = id;
      const _this = document.getElementsByClassName("_swiper");
      _this[0].swiper.activeIndex = this.checked - 1;
      if (id == 1) {
        this.caseList = this.caseList1;
      } else if (id == 2) {
        this.caseList = this.caseList2;
      } else if (id == 3) {
        this.caseList = this.caseList3;
      } else if (id == 4) {
        this.caseList = this.caseList4;
      } else if (id == 5) {
        this.caseList = this.caseList5;
      } else if (id == 6) {
        this.caseList = this.caseList6;
      }
    },
    goAnchor(selector) {
      /*参数selector是id选择器（#anchor14）*/
      this.$el.querySelector(selector).scrollIntoView();
    },
    handleCommand1(command) {
      if (command == "#phone") {
        // this.signout();
        document.documentElement.scrollTop = document.body.scrollHeight;
      } else {
        this.$el.querySelector(command).scrollIntoView();
      }
    },
    handleClose() {
      this.loginShow = false;
      this.account = "";
      this.password = "";
    },
    handleChange() {
      if (this.times) {
        clearTimeout(this.times);
      }
      this.times = setTimeout(() => {
        this.login();
      }, 500);
    },
    async login() {
      let account = this.$encrypt(this.account);
      let password = this.$encrypt(this.password);
      let body = {
        username: account,
        password: password,
        rememberMe: false,
      };

      if (this.click) {
        const res = await this.$indexApi.login(body);
        if (res.code == 0) {
          this.click = false;
          this.data = res.data;
          Cookie.set("token", res.data.token);
          this.isLogin = true;
          this.account = "";
          this.password = "";
          this.$message({
            message: "登录成功",
            type: "success",
            duration: "1000",
            center: true,
          });
          this.getUserInfo();
          this.getWebList();
          this.loginShow = false;
        } else {
          this.$notify({
            title: "登录失败",
            message: "用户名/密码错误！",
            type: "warning",
          });
        }
      }
    },
    async getUserInfo() {
      const res = await this.$indexApi.getUserInfo();
      if (res.code == 0) {
        if (res.data == null) {
          this.isLogin = false;
        } else {
          this.userInfo = res.data.user;
        }
      }
    },
    async getWebList() {
      const res = await this.$indexApi.getWebList();
      if (res.code == 0) {
        if (res.data == null) {
          this.isLogin = false;
        } else {
          this.webList = res.data;
        }
      }
    },
    handleCommand(command) {
      if (command == "signout") {
        this.signout();
      } else {
        // console.log(command);
        window.open(command, "_blank");
      }
    },
    async signout() {
      const res = await this.$indexApi.signout();
      if (res.code == 0) {
        this.click = true;
        this.isLogin = false;
        Cookie.remove("token");
        this.$message({
          message: "已退出",
          duration: "1000",
          center: true,
        });
        this.$router.push({ path: "/mobile" });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleClickSlide() {
      // this.checked = this.checked + 1;
    },
    async getNews() {
      const res = await this.$indexApi.getNews({
        current: this.current,
        size: 4,
        descs: "top,news_created_at",
      });
      if (res.code == 0) {
        this.newsList = res.data.records;
        this.total = res.data.total;
      }
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getNews();
    },
    gotoDetail(item) {
      this.$router.push({
        name: "mobile-news-id",
        params: {
          id: item.id,
        },
      });
    },
    gotoNohas() {
      window.open("https://www.nuochtec.com/mobile", "_blank");
    },

    
    //客服
    service() {
      window.open(
        "https://work.weixin.qq.com/kfid/kfca326eda0305bd091",
        "_blank"
      );
    },
  },
};
</script>
<style scoped lang='scss'>
.topNav {
  // width: 100%;
  height: 32px;
  // margin: 0px auto;
  padding: 8px 18px;
  overflow: hidden;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo {
    .logo-img {
      // width: 102px;
      height: 32px;
    }
  }
  .nav {
    display: flex;
    align-items: center;
    .login {
      display: flex;
      margin-left: 38px;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.56);
      .user {
        margin-left: 8px;
        width: 16px;
        height: 16px;
      }
    }
    .menu {
      margin-left: 17px;
      margin-top: 4px;
      .icon {
        width: 16px;
        height: 18px;
      }
    }
  }
}
.banner {
  position: relative;
  height: 226px;
  .banner-image {
    width: 100%;
    height: 100%;
    // position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .hover {
    width: 100%;
    height: 100%;
    // position: absolute;
    top: 0;
    left: 0;
    background: rgba(13, 21, 46, 0.32);
    z-index: 1;
    .text1 {
      position: absolute;
      top: 54px;
      left: 24px;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 1.14px;
      line-height: 37px;
      color: rgba(255, 255, 255, 1);
      text-align: right;
    }
    .text2 {
      position: absolute;
      top: 91px;
      left: 24px;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 29px;
      color: rgba(255, 255, 255, 1);
      text-align: right;
    }
    .case-box {
      position: absolute;
      bottom: 0;
      height: 60px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      background: rgba(255, 255, 255, 0.78);
      //   padding: 0 34px;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 14px;
      color: rgba(13, 21, 46, 1);
      .case {
        padding-top: 17px;
        text-align: center;
        .icon {
          width: 18px;
          height: 18px;
          margin: 0 auto;
        }
        .text {
          margin-top: 2px;
        }
      }
    }
  }
}
.product {
  padding: 16px;
  background: rgba(245, 246, 250, 1);
  .text {
    margin: 16px 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: rgba(13, 21, 46, 0.65);
  }
  .product-box {
    display: flex;
    flex-wrap: wrap;
    .product-item {
      width: 43%;
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 5%;
      padding-right: 2%;
      .text-box {
        .text1 {
          font-size: 12.7px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 22px;
          color: rgba(0, 0, 0, 0.56);
          margin-bottom: 1px;
        }
        .text2 {
          font-size: 16.93px;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 20px;
          color: rgba(13, 21, 46, 1);
        }
      }
    }
    img {
      width: 34px;
      height: 34px;
    }
  }
}
.example {
  background: rgba(245, 246, 250, 1);
  .text {
    padding: 0 16px;
    margin: 16px 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: rgba(13, 21, 46, 0.65);
  }
  .example-box {
    margin: 0 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    overflow-x: auto;
    white-space: nowrap;
    .example-item {
      margin: 0 6px;
      padding-bottom: 16px;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      position: relative;
      .icon1 {
        margin: 0 auto;
        width: 24px;
        height: 24px;
        border-radius: 24px;
        background: #FFF6EC;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
          width: 16px;
          height: 16px;
        }
      }
      .icon2 {
        margin: 0 auto;
        width: 24px;
        height: 24px;
        border-radius: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
          width: 16px;
          height: 16px;
        }
      }
      .example-title1 {
        font-size: 10px;
        font-weight: 500;
        line-height: 13px;
        color: #ED7632;
        margin-top: 6px;
      }
      .example-title2 {
        font-size: 10px;
        font-weight: 500;
        line-height: 13px;
        color: rgba(13, 21, 46, 0.65);
        margin-top: 6px;
      }
      .border {
        position: absolute;
        bottom: -1px;
        width: 80%;
        margin-left: 10%;
        height: 2px;
        background: #FF8D1A;
      }
    }
  }
  .example-image {
    margin-top: 16px;
    // border-top: 1px solid rgba(229, 229, 229, 1);
  }
}
.about {
  padding: 16px;
  background: rgba(245, 246, 250, 1);
  .text {
    margin: 16px 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: rgba(13, 21, 46, 0.65);
  }
  .data-box {
    display: flex;
    justify-content: space-between;
    height: 49px;
    padding: 0 39px;
    .data-item {
      .data-text {
        margin-top: 8px;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        color: rgba(13, 21, 46, 0.65);
      }
    }
    .line {
      height: 49px;
      width: 1px;
      background: #565656;
    }
  }
}
.newsList {
  margin-top: 18px;
  .news {
    box-shadow: 0px 1px 2px 0px rgba(128, 128, 128, 0.56);
    height: 84px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;
    background: #fff;
    .left {
      // width: 240px;
      width: 75%;
      .top {
        font-size: 16px;
        height: 32px;
        line-height: 32px;
        color: rgba(13, 21, 46, 0.65);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
      }
      .bottom {
        font-size: 14px;
        height: 32px;
        line-height: 32px;
        color: rgba(128, 128, 128, 0.56);
      }
    }
    .right {
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      color: rgba(255, 117, 18, 1);
      border-left: 1px solid rgba(13, 21, 46, 0.65);
      text-align: center;
      width: 25%;
      max-width: 98px;
      display: flex;
      justify-content: center;
    }
  }
}
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.partner {
  height: 121px;
  background: url(~/static/h5/background1.png);
  padding: 13px 26px;
  .partner-box {
    background: #fff;
    padding: 16px 23px;
    padding-bottom: 17px;
    position: relative;
    .title {
      position: absolute;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 24px;
      color: rgba(13, 21, 46, 0.65);
      padding: 0 14px;
      top: 5px;
      left: 36%;
      background: #fff;
    }
    .partners {
      border-top: 1px solid rgba(166, 166, 166, 1);
      padding-top: 16px;
      .parter-item {
        display: flex;
        align-items: center;

        margin-top: 8px;
        .text {
          font-size: 10px;
          font-weight: 400;
          letter-spacing: 0px;
          color: rgba(56, 56, 56, 1);
          margin-right: 8px;
          padding-bottom: 3px;
          border-bottom: 1px solid rgba(56, 56, 56, 1);
        }
        img {
          margin-right: 7px;
          height: 27px;
          border: 0.8px solid rgba(0, 0, 0, 1);
          border-image: linear-gradient(
              to bottom right,
              rgba(255, 255, 255, 0.1),
              rgba(255, 255, 255, 0.37) 34%,
              rgba(235, 235, 235, 0.09) 56%,
              rgb(212, 212, 212) 76%
            )
            30 30;
        }
      }
    }
  }
}

.float {
  position: fixed;
  bottom: 150px;
  right: 0;
  width: 36px;
  padding: 16px;
  background: #fff;
  z-index: 9;
  border-radius: 5px 0 0 5px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  .item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 18px;
    color: rgba(0, 0, 0, 1);

    img {
      margin-bottom: 2px;
      width: 24px;
      height: 24px;
    }
  }
}

::-webkit-scrollbar { display: none; } 
</style>
    